import React, { useState, useEffect } from 'react';
import { Drawer, Descriptions, Card, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { GridContent } from '@ant-design/pro-layout';
import AGrid from '@/components/SelfComp/AGrid';
import { DataItem, FormDrawerProps } from '@/types/global';
import { RoleItem } from '@/types/role';
import { UserItem } from '@/types/user';
import { getItemValue } from '@/utils/commons';

type ViewUserProps<T> = FormDrawerProps<T> & {
  userList: UserItem[];
  userStatusData: DataItem[];
}

const ViewUserDrawer: React.FC<ViewUserProps<RoleItem>> = (props) => {
  // 自定义分页
  const [users, setUsers] = useState<UserItem[]>([]);
  const [total, setTotal] = useState<number>(0);
  const [pageSize, setPageSize] = useState<number>(10);

  useEffect(() => {
    console.info('ViewUserDrawer.useEffect');
    // 获取用户列表
    const { userList } = props;
    fetchUserByPage(1, pageSize, userList);
  }, []);

  const columns: ColumnsType<UserItem> = [
    {
      title: '用户姓名',
      dataIndex: 'userName',
    },
    {
      title: '用户账号',
      dataIndex: 'userCode',
    },
    {
      title: '虚拟机账号',
      dataIndex: 'virtualCode',
    },
    {
      title: '状态',
      dataIndex: 'userStates',
      render: (text: string, record: UserItem, index: number) => userStatesFunc(record),
    }
  ];

  const userStatesFunc = (record: UserItem) => {
    const { userStatusData } = props;
    const { userStates } = record;
    if (!userStates) {
      return '';
    }
    const value = getItemValue(userStatusData, userStates);
    if (userStates === '1') {
      return <Tag color='error'>{value}</Tag>;
    }
    return <Tag color='processing'>{value}</Tag>
  }

  const onClose = () => {
    // 先清除form表单
    const { onHandlerCancel } = props;
    if (onHandlerCancel) {
      onHandlerCancel();
    }
  }

  /**
   * 手动获取分页数据
   * @param {*} pageSize 每页记录条数
   * @param {*} pageNum 页码
   * @param {*} userList 用户列表数据
   */
  const fetchUserByPage = (pageNum: number, pageSize: number, userList: UserItem[]) => {
    if (userList && userList.length > 0) {
      setPageSize(pageSize);
      const tmpUserList: UserItem[] = userList.slice((pageNum - 1) * pageSize, pageNum * pageSize);
      setUsers(tmpUserList);
      setTotal(userList.length);
    }
  }

  /**
   * 页码改变的回调，参数是改变后的页码及每页条数
   * @param page 改变后的页码，上送服务器端
   * @param pageSize 每页数据条数
   */
  const onPageNumAndSizeChange = (page: number, pageSize: number) => {
    // console.log(page, pageSize);
    const { userList } = props;
    fetchUserByPage(page, pageSize, userList);
  };

  const { formData, drawerWidth, drawerVisible } = props;
  const { roleCode, roleName } = formData;
  const code = 'user-view';
  const loading = false;
  const rowKey = (record: UserItem) => record.userId;
  const pkField = 'userId';
  const title = `${roleCode}-${roleName}关联用户列表`;
  // console.info(users);

  return (
    <Drawer
      open={drawerVisible}
      title={title}
      placement='right'
      width={drawerWidth}
      onClose={onClose}
    >
      <GridContent>
        <Card title='角色基本信息'>
          <Descriptions column={1}>
            <Descriptions.Item label='角色编码'>{formData.roleCode}</Descriptions.Item>
            <Descriptions.Item label='角色名称'>{formData.roleName}</Descriptions.Item>
            <Descriptions.Item label='角色描述'>{formData.roleDesc}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title='已分配的用户列表'>
          <AGrid
            code={code}
            noActionColumn={true}
            columns={columns}
            rowKey={rowKey}
            pkField={pkField}
            dataSource={users}
            loading={loading}
            total={total}
            onPageNumAndSizeChange={onPageNumAndSizeChange}
          />
        </Card>
      </GridContent>
    </Drawer>
  );
}

export default ViewUserDrawer;